
<template>
  <div class="user-card-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="用户标题">
        <el-input
          v-model="data.title"
          placeholder="请输入用户标题"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="用户描述">
        <el-input
          v-model="data.description"
          placeholder="请输入用户描述"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="用户头像">
        <ImageUpload
          v-model="data.avatar"
          :limit="1"
          :file-size="5"
          file-type="['jpg', 'jpeg', 'png', 'gif']"
        />
      </el-form-item>

      <el-form-item label="按钮文字">
        <el-input
          v-model="data.buttonText"
          placeholder="请输入按钮文字"
          maxlength="10"
          show-word-limit
        />
      </el-form-item>

      <el-form-item label="按钮类型">
        <el-select v-model="data.buttonType" placeholder="请选择按钮类型">
          <el-option label="主要" value="primary" />
          <el-option label="成功" value="success" />
          <el-option label="警告" value="warning" />
          <el-option label="危险" value="danger" />
          <el-option label="信息" value="info" />
          <el-option label="文本" value="text" />
        </el-select>
      </el-form-item>

      <el-form-item label="按钮颜色">
        <el-color-picker v-model="data.buttonColor" />
      </el-form-item>

      <el-form-item label="按钮大小">
        <el-select v-model="data.buttonSize" placeholder="请选择按钮大小">
          <el-option label="大" value="large" />
          <el-option label="默认" value="default" />
          <el-option label="小" value="small" />
        </el-select>
      </el-form-item>

      <el-divider>样式设置</el-divider>

      <el-form-item label="背景颜色">
        <el-color-picker v-model="data.backgroundColor" />
      </el-form-item>

      <el-form-item label="卡片高度">
        <el-slider 
          v-model="data.height" 
          :min="60" 
          :max="150" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="右边距">
        <el-slider 
          v-model="styles.marginRight" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import ImageUpload from '@/components/ImageUpload/index.vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])
</script>

<style lang="scss" scoped>
.user-card-panel {
  padding: 10px;
}
</style>
